<template>
  <view class="container">
    <!-- 列表页 -->
    <view class="card-list">
      <view
              class="card"
              v-for="(item, index) in persons"
              :key="index"
              @click="goOperateDetails(item.id)"
      >
        <view class="list-item">
          <view class="status-container">
            <div>{{ item.name}}</div>
            <u-icon
                    name="arrow-right"
                    size="16"
                    color="#C0C0C0"
                    class="arrow-icon"
            ></u-icon>
          </view>
        </view>
        <view class="list-item1">
          <text>{{ item.region }}</text>
          <text>{{ item.certNumber }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        persons:[]
      };
    },
    onLoad(options) {
      this.persons = JSON.parse(decodeURIComponent(options.persons));
    },
    methods: {
      // 其他方法
      goOperateDetails(id) {
        uni.redirectTo({
          url: "/pages/hub_ygzw/person/personDetails?id=" + id,
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    background-color: #f3f6fa;
    height: 100vh;
    width: 100%;
  }

  .card-list {
    padding: 10px;

    .card {
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin-bottom: 10px;
      padding: 20px;
      .list-item {
        display: flex;
        .status-container {
          display: flex;
          align-items: center;
          white-space: nowrap; /* 防止换行 */
          .arrow-icon {
            margin-left: 5px;
          }
        }
      }
      .list-item1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        height: 32px;
        background: #fafafb;
        border-radius: 3px;
      }
    }
  }
</style>
